<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>房间信息</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <link href="css/base.css" rel="stylesheet" type="text/css" />
    <link href="css/button.css" rel="stylesheet" type="text/css" />
    <link href="css/icon.css" rel="stylesheet" type="text/css" />
    <link href="css/build.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="slider-container sc">
        <div id="slider-dom" class="slider-box">
        </div>
        <script id="slider" type="text/html">
            {{each pic}}
            <span data-index="{{ $index }}">
          {{each $value.pic}}
          <img src="{{$value}}"> {{/each}}
          </span> {{/each}}
        </script>
        <span class="pagination"></span>
        <div class="slider-label-container">
            <ul id="slider-label-dom" class="slider-label">
            </ul>
            <script id="slider-label" type="text/html">
                {{each pic}}
                <li><a data-index="{{ $index }}" class="{{ $index === 0 ? 'active' : '' }}" href="javascript:;">{{ $value.name }}</a></li>
                {{/each}}
            </script>
        </div>
        <div class="slider-label-mask"></div>
        <a class="btn btn-share bs" href="javascript:;">分享赚钱</a>
        <div class="share-mask"></div>
    </div>
    <div class="header-title">
        <span class="card-body-title"></span>
        <div class="card-body-subtitle">
            <span class="month-fee font-yellow"></span>
            <i class="icon icon-yen"></i>
            <a class="pay" href="javascript:;">付款优惠</a>
        </div>
        <div class="line-title">
            <div class="base-line"></div>
            <div class="base-info">基本信息</div>
        </div>
        <div id="base-dom" class="card-body"></div>
        <script id="base" type="text/html">
            <ul class="card-body-content">
                <li>{{ region_name }}</li>
                <li>{{ population }}</li>
                <li>{{ size }}㎡</li>
                <li class="last">{{ nums }}间在租</li>
            </ul>
            <div class="card-body-label">
                {{each configuration}}
                <label class="{{ $index | color }}">{{ $value }}</label> {{/each}}
            </div>
            <div class="divider"></div>
        </script>
        <ul id="nav-bar-dom" class="nav-bar yellow"></ul>
        <script id="nav-bar" type="text/html">
            <li><a href="house.html?id={{ id }}">你的小家</a></li>
            <li><a class="active" href="javascript:;">房间信息</a></li>
            <li class="last"><a href="around.html?id={{ id }}">周边/交通</a></li>
        </script>
    </div>
    <div id="list-dom" class="list-container"></div>
    <script id="list" type="text/html">
        {{each list}}
        <a href="javascript:;" data-id="{{ $value.id }}" class="list-item li {{if $value.is_type === '1'}}gray{{/if}}">
            <div class="list-item-image">
                <img src="{{ $value.pic[0] }}"> {{if $value.is_type === '1'}}
                <div class="img-text">已出租</div>
                <div class="img-mask"></div>
                {{/if}}
            </div>
            <div class="list-item-text">
                <div class="title">{{ $value.name }} {{ $value.room_size }}㎡ {{ $value.bedroom_type }}</div>
                <!-- <i class="icon icon-female"></i> -->
                <span class="{{if $value.is_type === '0'}}font-red{{/if}}">&yen; {{ $value.season_pay }}/月（季付价）</span>
                <ul>
                    {{each $value.room_configure}}
                    <li>{{ $value }}</li>
                    {{/each}}
                </ul>
            </div>
        </a>
        <div class="divider"></div>
        {{/each}}
    </script>
    <div class="footer-padding"></div>
    <div class="tool-bar">
        <a class="favorite" href="javascript:;">
            <i class="icon icon-star-red-blank"></i>
        </a>
        <span class="separator"></span>
        <a id="phone" href="">
            <i class="icon icon-phone"></i>
        </a>
        <span class="separator"></span>
        <a href="javascript:;" class="btn prepoint">预约看房</a>
        <a href="javascript:;" class="btn yellow checkin">立即入住</a>
    </div>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
    <script src="js/template.js" type="text/javascript"></script>
    <script src="js/dialog.js" type="text/javascript"></script>
    <script src="js/base.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            var list = [];
            var n = 1;
            $('body').on('click', 'a.favorite', function(e) {
                var dom = $(this).find('.icon');
                if (dom.hasClass('icon-star-red-blank')) {
                    bee.request({
                        url: '/Member/Index/collection',
                        data: {
                            type: 1,
                            housing_id: bee.getQueryString('id'),
                        },
                        success: function(result) {
                            dom.removeClass('icon-star-red-blank').addClass('icon-star-red');
                        }
                    });
                } else {
                    bee.request({
                        url: '/Member/Index/collection',
                        data: {
                            type: 2,
                            housing_id: bee.getQueryString('id'),
                        },
                        success: function(result) {
                            dom.removeClass('icon-star-red').addClass('icon-star-red-blank');
                        }
                    });
                }
            });

            $('body').on('click', '.li', function() {
                $(this).siblings().removeClass('yellow');
                $(this).addClass('yellow');
            });

            $('body').on('click', '.prepoint', function() {
                var housing_id = $('.list-item.yellow').attr('data-id');
                if (housing_id === undefined) {
                    alert('请选择房间');
                    return;
                }
                bee.open('appointment.html', {
                    id: bee.getQueryString('id'),
                    housing_id: housing_id
                });
            });

            $('body').on('click', '.close', function() {
                $('.dialog').dialog('hide');
            });

            $('body').on('click', '.pay', function() {
                var housing_id = $('.list-item.yellow').attr('data-id');
                if (housing_id === undefined) {
                    alert('请选择房间');
                    return;
                }
                for (var i = 0; list[i]; i++) {
                    if (list[i].id = housing_id) {
                        bee.template('profit', list[i], true);
                        $('.dialog').dialog('show');
                        break;
                    }
                }
            });

            $('body').on('click', '.checkin', function() {
                var housing_id = $('.list-item.yellow').attr('data-id');
                if (housing_id === undefined) {
                    alert('请选择房间');
                    return;
                }
                bee.open('pay.html', {
                    housing_id: housing_id,
                    id: bee.getQueryString('id')
                });
            });

            bee.request({
                url: '/Index/Index/housing_view',
                data: {
                    id: bee.getQueryString('id'),
                },
                success: function(result) {
                    list = result.info.list;
                    bee.template('slider', result.info, true);
                    bee.template('slider-label', result.info, true);
                    bee.template('base', result.info, true);
                    bee.template('nav-bar', result.info, true);
                    bee.template('list', result.info, true);
                    $('.card-body-title').text(result.info.title);
                    $('.month-fee').text('￥' + result.info.money + ' / 月 ');
                    $('#phone').attr('href', 'tel:' + result.info.mobile);
                    if (result.info.is_collertion) {
                        $('.favorite .icon').removeClass('icon-star-red-blank').addClass('icon-star-red');
                    }
                    swiper();

                    bee.wxConfig(function() {
                        bee.hideAllNonBaseMenuItem();
                        bee.showMenuItems();
                        bee.wxMenuShareTimeline(result.info.title, bee.link.weixin + '/build.html?user_id=' + bee.cache('user_id') + '&id=' + result.info.id, function() {

                        }, function() {

                        });
                        bee.wxMenuShareAppMessage(result.info.title, result.info.neighbourhoods_addr, bee.link.weixin + '/build.html?user_id=' + bee.cache('user_id') + '&id=' + result.info.id, function() {

                        }, function() {

                        });
                    }, function(res) {});
                    bee.share();

                    $('body').on('click', '.bs', function() {
                        $('.share-modal').show();
                    });

                    $('body').on('click', '.slider-label a[data-index]', function(e) {
                        var width = $('body').width();
                        var size = $('.slider-container .slider-box img').length;
                        n = $('.slider-box span[data-index="' + $(this).attr('data-index') + '"]:first img').index('.slider-box img') + 1;
                        $('.slider-label a[data-index]').removeClass('active');
                        $(this).addClass('active');
                        $('.slider-container .pagination').text(n + ' / ' + size);
                        $('.slider-container .slider-box').css({
                            'margin-left': -(n - 1) * width
                        });
                    });
                }
            });

            function swiper() {
                var width = $('body').width();
                var size = $('.slider-container .slider-box img').length;
                $('.slider-container .slider-box').width(width * size);
                $('.slider-container .slider-box img').width(width);
                $('.slider-container .pagination').text(n + ' / ' + size);

                var startPos = 0;
                $('body').on('touchstart', '.sc', function(e) {
                    startPos = e.touches[0].pageX;
                });

                $('body').on('touchend', '.sc', function(e) {
                    var endPos = e.changedTouches[0].pageX;
                    if (Math.abs(startPos - endPos) < 10) {
                        return;
                    }
                    var left = $('.slider-container .slider-box').offset().left;
                    if (startPos > endPos) {
                        if (n > size - 1) {
                            return;
                        }
                        var index = $('.slider-box img').eq(n).parent().attr('data-index');
                        $('.slider-label a[data-index]').removeClass('active');
                        $('.slider-label a[data-index="' + index + '"]').addClass('active');
                        $('.slider-container .pagination').text((++n) + ' / ' + size);
                        $('.slider-container .slider-box').animate({
                            'margin-left': left - width
                        }, 500);
                    } else {
                        if (n < 2) {
                            return;
                        }
                        var index = $('.slider-box img').eq(n - 2).parent().attr('data-index');
                        $('.slider-label a[data-index]').removeClass('active');
                        $('.slider-label a[data-index="' + index + '"]').addClass('active');
                        $('.slider-container .pagination').text((--n) + ' / ' + size);
                        $('.slider-container .slider-box').animate({
                            'margin-left': left + width
                        }, 500);
                    }
                });
            }
        });
    </script>
    <div class="dialog">
        <div class="dialog-title">房租年付更优惠</div>
        <div class="dialog-body">
            <table>
                <thead>
                    <tr class="even">
                        <th>方式</th>
                        <th>租金（元/月）</th>
                        <th>押金（元）</th>
                        <th>总计（元/年）</th>
                    </tr>
                </thead>
                <tbody id="profit-dom">

                </tbody>
                <script id="profit" type="text/html">
                    <tr>
                        <td>月付</td>
                        <td>&yen;{{ month_pay }}</td>
                        <td>&yen;{{ deposit_money }}</td>
                        <td>&yen;{{ total(month_pay) }}</td>
                    </tr>
                    <tr class="even">
                        <td>季付</td>
                        <td>&yen;{{ season_pay }}</td>
                        <td>&yen;{{ deposit_money }}</td>
                        <td>&yen;{{ total(season_pay) }}</td>
                    </tr>
                    <tr>
                        <td>年付</td>
                        <td>&yen;{{ year_pay }}</td>
                        <td>&yen;{{ deposit_money }}</td>
                        <td>&yen;{{ total(year_pay) }}</td>
                    </tr>
                </script>
            </table>
        </div>
        <div class="dialog-foot">
            <a href="javascript:;" class="font-blue close">关闭</a>
        </div>
    </div>
</body>

</html>
